<template>
    <div class="left_box_1">
        <div class="top_box">
            总人数按少数民族分布
        </div>

        <div class="right_box">
            <div class="echarts" style="width: 100%; height: 100%;" ref="chart"></div>
        </div>
    </div>

</template>

<script>
let Echarts = require('echarts/lib/echarts'); //基础实例 注意不要使用import
require('echarts/lib/chart/pie'); //按需引入 bar = 柱状图
export default {
    name: "index",
    data() {
        return {
            xdata: [],
            ydata: [],
            option: {
                tooltip: {
                    trigger: 'item',
                    itemPointer: {
                        type: 'dashed',
                        lineStyle: {
                            opacity: 0,
                        },
                    },
                    backgroundColor: 'rgba(39,42,49,0.7)', //设置背景图片 rgba格式
                    borderColor: 'rgba(39,42,49,0.7)', //设置边框颜色
                    textStyle: {
                        color: '#fff' //设置文字颜色
                    }
                },
                dataZoom: [//滑动条
                    {
                        xAxisIndex: 0,//这里是从X轴的0刻度开始
                        show: true,//是否显示滑动条，不影响使用
                        type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
                        startValue: 0, // 从头开始。
                        height: 0,
                        endValue: 3, // 一次性展示4个。
                        bottom: '5%',
                        zoomLock: true,
                        borderColor: 'transparent',
                        // dataBackgroundObject: '#070f22',
                    }

                ],
                xAxis: {
                    type: 'category',
                    data: [],
                    // x轴坐标颜色
                    axisLine: {
                        lineStyle: {
                            color: '#868C96',
                        }
                    },
                },
                yAxis: {
                    type: 'value',
                    min: 0,
                    max: 10000,
                    interval: 2000,
                    // x轴坐标颜色
                    axisLine: {
                        lineStyle: {
                            color: '#D7D8DA',
                        }
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: 'dashed',
                            color: '#414b5d'
                        }
                    },
                },
                series: [
                    {
                        data: [],
                        // 柱状图顶部显示数字
                        label: {
                            show: true, // 开启显示
                            rotate: 70, // 旋转70度
                            position: 'top', // 在上方显示
                            distance: 20, // 距离图形元素的距离。当 position 为字符描述值（如 'top'、'insideRight'）时候有效。
                            verticalAlign: 'middle',
                            textStyle: { // 数值样式
                                color: '#37A2FF',
                                fontSize: 13
                            }
                        },

                        type: 'bar',
                        barMaxWidth: 15,

                        itemStyle: {
                            normal: {
                                color: function (params) {
                                    let colorList = ['#37A2FF', '#00DDFF', '#FF0087', '#FFBF00'];
                                    let index = params.dataIndex % colorList.length;
                                    return colorList[index];
                                },
                            }
                        }
                    },
                ],
            }
        };
    },
    methods: {
        async initData() {
            let res = await new this.Request(this.Urls.m().workerNationSummary, '').modepost();
            if (res.status == 200) {
                console.log(JSON.stringify(res))
                res.data.forEach(item => {
                    this.xdata.push(item.nation)
                    this.ydata.push(item.presentCount)

                    this.option.xAxis.data = this.xdata
                    this.option.series[0].data = this.ydata
                })
            }
            this.initEcharts()
        },

        initEcharts() {
            this.chart = Echarts.init(this.$refs.chart);
            this.chart.setOption(this.option);
        }

    },

    mounted() {
        this.initData()
    }
};
</script>

<style scoped="scoped">
.left_box_1 {
    border: 1px solid #258add;
    background-color: rgb(13, 25, 45);
    display: flex;
    height: 100%;
    width: 100%;
    position: relative;
}
.top_box {
    position: absolute;
    left: 30px;
    top: -10px;
    color: #03fafb;
    font-size: 15px;
    text-shadow: 0 0 0.5rem #00d8ff;
}
.left_box {
    margin: 10px 0px 10px 30px;
    width: 20%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-around;
    /* background-color: rgb(32, 30, 25); */
}
.left_box_item {
    display: flex;
    align-items: center;
}
.left_box_item img {
    width: 35px;
    height: 35px;
}
.left_box_item_title {
    margin-left: 10px;
}
.left_box_item_title_num {
    font-size: 14px;
    font-weight: bold;
    color: #fff;
}
.left_box_item_title_txt {
    font-size: 13px;
    color: #9ca1aa;
}

.right_box {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: 100%;
    margin: 10px;
    background-color: rgb(13, 25, 45);
}
.right_box_tab {
    background-color: rgb(13, 25, 45);
    width: 100%;
    display: flex;
    justify-content: flex-end;
    font-size: 13px;
}
.right_box_tab div {
    padding: 5px 7px;
    border: 1px solid #3e4758;
    cursor: pointer;
    color: #ced1d5;
}
</style>
